<template>
  <div class='screen-list-container'>
    <el-form :model="requestParams"
             size="medium"
             ref="requestParams">
      <div class="condition-style"
           v-if="!isDemo">
        <h2 class="title">监控台</h2>
      </div>
      <div class="screen-list">
        <div v-for="(item,index) in screenList.list"
             :key="index+'r'"
             class="screen-list-item">
          <img src="@/assets/screen-default.png"
               @click="toPreview(item)"
               v-if="!item.logo"
               alt="">
          <img :src="item.logo"
               @click="toPreview(item)"
               v-if="item.logo"
               alt="">
          <div class="screen-info">
            <p :title="getShowName(item)"
               class="text-style">{{ getShowName(item) }}</p>
            <p class="instance-style"
               v-if="item.type==5"><span>{{ item.updated_at }}</span>
              <el-tooltip class="item"
                          effect="dark"
                          :content="item.default_status=='1'?'当前已是默认的模版':'设为默认'"
                          placement="bottom">
                <img @mouseover="onMouseOver(item,index)"
                     @mouseout="onMouseOut(item,index)"
                     @click="onSetDefault(item)"
                     :src="currentCount==index?require('@/assets/img/pushpin-sel-ic.png'):require('@/assets/img/pushpin-ic.png')">
              </el-tooltip>
            </p>
          </div>
        </div>
        <div class="screen-list-item"
             v-if="!isDemo">
          <img src="@/assets/screen-default.png"
               @click="toWisdomScreen(item)"
               alt="">
          <div class="screen-info">
            <p class="text-style">智慧工地驾驶舱</p>
            <p class="instance-style"></p>
          </div>
        </div>
        <div class="screen-list-item"
             v-if="!isDemo">
          <img src="@/assets/screen-default.png"
               @click="toWisdomScreen(item,'quick')"
               alt="">
          <div class="screen-info">
            <p class="text-style">智慧工地驾驶舱(3.1.0)</p>
            <p class="instance-style"></p>
          </div>
        </div>
        <div class="screen-list-item"
             v-if="!isDemo">
          <img src="@/assets/screen-default.png"
               @click="toWisdomScreen(item,'quick2')"
               alt="">
          <div class="screen-info">
            <p class="text-style">智慧工地驾驶舱(4.0)</p>
            <p class="instance-style"></p>
          </div>
        </div>
        <div v-for="(item,index) in placeholderList"
             :key="index"
             class="screen-list-item placeholder">
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import moment from 'moment'
import { SendCodeApi } from '@/services/Public'
import { standardCodeApi } from '@/services/StandardCode'

export default {
  props: {
    isDemo: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      imgUrl: require('@/assets/img/pushpin-ic.png'),
      currentCount: -1,
      screenList: {
        list: []
      },
      requestParams: {
        content: '',
        system_no: this.$route.query.system_no || 'intecons',
        categ_no: this.$route.query.categ_no || '',
        is_page: 0,
        page: 1,
        page_size: 30
      },
      placeholderList: [],
      userInfo: {}
    }
  },
  methods: {
    // 跳转智慧工地3.0大屏
    toWisdomScreen (item, type) {
      console.log(process.env, '8')
      let url = process.env.CONSOLE_URL
      let userInfo = window.localStorage.getItem('userInfo') || '{}'
      userInfo = JSON.parse(userInfo)
      // 判断dept_type为1是单位级，跳企业级大屏，为2跳项目级大屏
      if (userInfo.dept_type === '1') {
        url += `WisdomSiteScreen?company_id=${userInfo.comp_id}&org_no=${userInfo.org_no}&is_mock=0&token=${userInfo.short_token}`
        if (type === 'quick') {
          url += '&fast=1'
        } else if (type === 'quick2') {
          url += '&fast=2'
        }
      } else {
        let choosedProject = this.$store.state.choosedProject || {};
        let projectId = choosedProject.project_id;
        let projectName = choosedProject.nick_name;
        url += `WisdomSiteScreenProject?project_id=${projectId}&projectName=${projectName}&is_mock=0&token=${userInfo.short_token}`
        if (type === 'quick') {
          url = `http://10.0.13.14:8081/view/95?project_id=${projectId}`
        } else if (type === 'quick2') {
          url = `http://dash.hibuilding.cn/view/133?project_id=${projectId}`
        }
      }
      window.open(url)
    },
    getShowName (item) {//显示的名称
      let generalStatus = item.general_status ? item.general_status : '0'
      let name = generalStatus == '0' ? item.instance_page_name : item.categ_name;
      return name;
    },
    onMouseOver (item, ind) {//鼠标移入
      this.currentCount = ind;
    },
    onMouseOut (item, ind) {//鼠标移出
      this.currentCount = this.getCurrentDefaultIndex(this.screenList.list);
    },
    onSearch () {//查询

    },
    onReset () {//刷新
      this.onSearch();//模糊查询
    },
    setDefaultInstancePage (item) {//默认接口
      SendCodeApi.setDefaultInstancePage({
        params: {
          id: item.instance_page_id//实例模版的主键值
        }
      }).then((res) => {
        if (res.code == 0) {
          this.getScreenList();//刷新
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    //设置为默认
    onSetDefault (item) {
      if (item.default_status == '1') {
        this.$message.warning('当前已是默认的模版')
      } else {
        this.$confirm('确定进行设为默认?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          left: true
        }).then(() => {
          this.setDefaultInstancePage(item);//设为默认的实例模版

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
      }
    },
    //设为默认的类型
    onBackType (item) {
      let typeVal = 'primary';
      if (item.default_status == '1') {
        typeVal = 'info'
      }
      ;
      return typeVal;
    },
    //设为默认是否禁用
    onDefaultIsDisable (item) {
      let typeVal = false;
      if (item.default_status == '1') {
        typeVal = true;
      }
      ;
      return typeVal;
    },
    getCurrentDefaultIndex (list) {//默认的索引
      let count = -1;
      if (list.length > 0) {
        list.map((item, ind, arr) => {
          if (item.default_status == '1') {
            count = ind;
          }
        })
      }
      ;
      return count;
    },
    getTimeUpdateData (list) {//年月日 时分秒更新为年月日
      let arr = [];
      if (list.length > 0) {
        list.map((item) => {
          item.updated_at = moment(item.updated_at).format('YYYY/MM/DD')
        })
      }
      ;
      arr = list;
      return arr;
    },
    getScreenList () {
      standardCodeApi.getPageInstance({
        params: this.requestParams
      }).then(res => {
        if (res.code === 0) {
          const { data } = res;
          // 如果是示范项目 则只显示浙江建工智慧工地公共平台大屏 测试环境id为37 正式环境id为72
          this.screenList = data;
          let list = this.screenList.list;
          this.screenList.list = this.getTimeUpdateData(list);//年月日 时分秒更新为年月日
          this.currentCount = this.getCurrentDefaultIndex(list);//默认的索引
          let length = this.screenList.list.length;
          this.placeholderList = new Array(4 - length % 4).fill({});
        }
      })
    },
    // 跳转到大屏预览页
    toPreview (item) {
      // let prefix = 'http://dev_console.ihibuilding.cn/pagePreview'
      let prefix = process.env.screenUrl;
      let userInfo = window.localStorage.getItem('userInfo') || '{}';
      userInfo = JSON.parse(userInfo)
      let orgNo = userInfo.org_no || '';
      let jobList = userInfo.job_list[0] || {};
      let currentCompName = jobList.org_name ? jobList.org_name : '';//当前单位
      let companyId = userInfo.comp_id || '';//单位的主键值
      let choosedProject = this.$store.state.choosedProject || {};
      let projectId = choosedProject.project_id;
      let projectName = choosedProject.nick_name;
      // let insTemResetName = item.instance_page_name;//项目名称显示重命名的字段值(2.0.4版本的需求)
      let isMock = this.$route.query.is_mock || '0';
      // dept_type
      let deptType = JSON.parse(localStorage.getItem('userInfo')).dept_type;//判断是项目还是单位
      let url = '';
      if (deptType == 1) {//单位
        url = `${prefix}?from=pageInstance&categ_no=${item.categ_no}&useage=${item.useage}&company_id=${companyId}&org_no=${orgNo}&is_mock=${isMock}&projectName=${currentCompName}`
      } else if (deptType == 2) {//项目
        url = `${prefix}?from=pageInstance&categ_no=${item.categ_no}&useage=${item.useage}&project_id=${projectId}&is_mock=${isMock}&projectName=${projectName}`
      }
      window.open(url);//新打开一个浏览器窗口
    }
  },
  created () {
    let userInfo = window.localStorage.getItem('userInfo') || '{}'
    this.userInfo = JSON.parse(userInfo)
    this.getScreenList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.screen-list-container {
  .condition-style {
    height: 54px;
    position: relative;
    display: flex;
    flex-direction: row;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    color: rgba($color: #000000, $alpha: 0.85);
    line-height: 54px;
    padding-left: 20px;
    border-bottom: 1px solid #e6e6e6;
  }

  .screen-list {
    width: 100%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 4%;
    .screen-list-item {
      width: 22%;
      height: 240px;
      display: flex;
      flex-direction: column;
      background: #ffffff;
      border-radius: 4px;
      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
      margin-bottom: 20px;

      &.placeholder {
        visibility: hidden;
      }

      img {
        cursor: pointer;
        width: 100%;
        height: 149px;
      }

      .screen-info {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;

        p {
          font-size: 16px;
          font-weight: bold;
          color: rgba($color: #000000, $alpha: 0.85);
        }

        span {
          font-size: 12px;
          color: rgba($color: #000000, $alpha: 0.45);
        }

        .text-style {
          /* 第一步：规定只能在一行显示 */
          white-space: nowrap;
          /* 第二部：多出的部分隐藏 */
          overflow: hidden;
          /* 第三步：加上省略号 */
          text-overflow: ellipsis;
        }

        .instance-style {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          img {
            width: 12.73px;
            height: 12.73px;
          }
        }
      }
    }
  }
}
</style>
